<template>
    <div class="sea-list">
        <div class="sea-top">
            <Button type="primary" @click="addSea">新建</Button>
            <SearchExpand>
                <Form ref="seaListForm" :model="searchData" :rules="searchRule" :label-width="0" inline>
                    <Row>
                        <Col span="2">
                        <div class="search-label">船名</div>
                        </Col>
                        <Col span="4">
                        <FormItem label="">
                            <Input class="search-input" v-model="searchData.vessel" />
                        </FormItem>
                        </Col>
                        <Col span="2">
                        <div class="search-label">航次号</div>
                        </Col>
                        <Col span="4">
                        <FormItem label="">
                            <Input class="search-input" v-model="searchData.voyageNo" />
                        </FormItem>
                        </Col>
                        <Col span="2">
                        <div class="search-label">发货人</div>
                        </Col>
                        <Col span="4">
                        <FormItem label="">
                            <Input class="search-input" v-model="searchData.consignorName" />
                        </FormItem>
                        </Col>
                        <Col span="2">
                        <div class="search-label">状态</div>
                        </Col>
                        <Col span="4">
                        <FormItem label="">
                            <RemoteSearch
                                placeholder="请选择"
                                v-model="searchData.consignmentStatus"
                                :list="dockStatusList"
                                keywordFiled="name"
                                valueField="value"
                                :labelFieldList="['value','name']"
                            >
                            </RemoteSearch>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="2">
                        <div class="search-label">码头</div>
                        </Col>
                        <Col span="4">
                        <FormItem label="">
                            <RemoteSearch
                                placeholder="请选择"
                                v-model="searchData.dockCode"
                                :list="dockList"
                                keywordFiled="dataName"
                                valueField="dataCode"
                                :labelFieldList="['dataCode','dataName']"
                            >
                            </RemoteSearch>
                        </FormItem>
                        </Col>
                        <Col span="2">
                        <div class="search-label">集装箱号</div>
                        </Col>
                        <Col span="4">
                        <FormItem prop="containerNo" label="">
                            <Input class="search-input" v-model="searchData.containerNo" />
                        </FormItem>
                        </Col>
                        <Col span="2">
                        <div class="search-label">创建时间段</div>
                        </Col>
                        <Col span="5">
                        <FormItem label="">
                            <DatePicker style="width:210px" v-model="time" format="yyyy-MM-dd" type="daterange" ></DatePicker>
                        </FormItem>
                        </Col>

                        <Col span="4">
                        <FormItem>
                            <Button type="primary" @click="search()" style="margin-left:20px;">查询</Button>
                        </FormItem>
                        </Col>

                    </Row>
                </Form>
            </SearchExpand>
            <div class="search-tools">
                <Icon
                    :class="{
                        'refresh-btn': true,
                        loading: rfLoading
                    }"
                    title="刷新"
                    type="md-refresh"
                    :size="24"
                    color="#a7a7a7"
                    @click="refreshList"
                />
            </div>
        </div>
        <div class="sea-table">
            <el-table style="width: 100%" ref="seaRef" :data="seaList" @row-dblclick="getDetails" border @selection-change="handleSelectionChange" highlight-current-row class="table-list" >
                <el-table-column type="selection" width="55" ></el-table-column>
                <el-table-column prop="manifestNo" label="内部编号" width="130" ></el-table-column>
                <el-table-column prop="consignmentStatus " label="状态" width="120" >
                    <template slot-scope="scope">
                        {{scope.row.consignmentStatus | fmtStatus}}
                    </template>
                </el-table-column>
                <el-table-column prop="containerNos" label="集装箱号" width="200">
                    <template slot-scope="scope">
                        <span :title="scope.row.containerNos | fmtContainerNosTitle">{{scope.row.containerNos | fmtContainerNos}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="totalPackageQuantity" label="件数"></el-table-column>
                <el-table-column prop="totalGrossMeasure" label="毛重"></el-table-column>
                <el-table-column prop="dockStatus" label="码头状态" width="80">
                    <template slot-scope="scope">
                        {{scope.row.dockStatus=='00'?'未放行':scope.row.dockStatus=='01'?'已放行':''}}
                    </template>
                </el-table-column>
                <el-table-column prop="vessel" label="船名" width="150"></el-table-column>
                <el-table-column prop="voyageNo" label="航次号" width="160"></el-table-column>
                <el-table-column width="120" prop="imo" label="IMO"></el-table-column>
                <el-table-column prop="dockCode" label="码头" width="100">
                </el-table-column>
                <el-table-column width="300" prop="consignorName" label="发货人姓名"></el-table-column>
                <el-table-column width="160" prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="createTime" label="操作" fixed="right">
                    <template slot-scope="scope" >
                        <Dropdown transfer>
                            <i class="table-icon t-setting-icon" title="操作"></i>
                            <DropdownMenu slot="list">
                                <DropdownItem @click.native="handlePrint(scope.row.manifestId)">打印</DropdownItem>
                                <DropdownItem v-if="scope.row.consignmentStatus=='3'||scope.row.consignmentStatus=='8'" @click.native="handleDelete(scope.row.manifestId)">删除</DropdownItem>
                                <DropdownItem @click.native="openRecord(scope.row)">查看回执</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="content-footer">
            <Page
                @on-change="currentChange"
                @on-page-size-change="pageSizeChange"
                :page-size="searchData.pageSize"
                :current="searchData.pageNum"
                :total="total"
                :transfer="true"
                show-total
                show-sizer
                show-elevator
            />
        </div>
        <printFile ref="printFileRef"></printFile>
        <importModal @importGetSea="getImportList" ref="importModalRef"/>
        <div v-if="showRecord">
            <Modal
                v-model="showRecord"
                title="海运舱单申报进程"
                width="800"
            >
                <el-table
                    class="record-table"
                    max-height="500"
                    border
                    ref="recordTable"
                    :data="recordData"
                    style="width: 100%"
                >
                    <el-table-column
                        type="index"
                        label="序号"
                        width="50"
                    >
                    </el-table-column>
                    <el-table-column
                        property="platCode"
                        label="平台代码"
                        width="120"
                    >
                    </el-table-column>
                    <el-table-column
                        property="messageTimeStr"
                        label="时间"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        property="manifestStatus"
                        label="舱单状态"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.manifestStatus | fmtStatus }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="responseMessage"
                        label="报文信息"
                        width="290"
                    >
                    </el-table-column>
                </el-table>

            </Modal>
        </div>

    </div>
</template>
<script>
import printFile from './printFile'
import SearchExpand from '_c/search-expand'
import { getList, deleteSea, sendSea, recordSea } from '@/api/sea'
import { getBasicData } from '@/api/declare.js'
import RemoteSearch from '@/view/components/RemoteSearch'
import formatTime from '@/libs/formatTime'
import importModal from './importModal'
import { getToken } from '@/libs/util'
import { downloadURL } from '@/config/downloadUrl.js'
const statusTag = {
    '8': '新单',
    '9': '已发送',
    '00': '入库成功',
    '11': '接收成功',
    '12': '接收失败',
    '21': '平台校验通过',
    '22': '平台校验不通过',
    '31': '已发送船代审核',
    '41': '船代审核通过',
    '42': '船代审核不通过',
    '51': '已发送海关',
    '61': '海关接受申报',
    '62': '海关待人工审核',
    '63': '海关退单',
    '9999': '海关放行'
}
const dockStatusList = Object.keys(statusTag).map(k => ({ value: k, name: statusTag[k] }))

export default {
    name: 'List',
    inject: ['nextPageReload'],
    components: { SearchExpand, printFile, RemoteSearch, importModal },
    filters: {
        fmtStatus (v) {
            return statusTag[v] || v
        },
        fmtContainerNos (v) {
            return v && v[0] ? v[0].containerNo : ''
        },
        fmtContainerNosTitle (v) {
            return v ? v.map(item => item.containerNo).join(',') : ''
        }
    },
    data () {
        const validatejzCheck = (rule, value, callback) => {
            if (value == '') {
                callback()
            } else {
                if (!/^[A-Z]{4}\d{7}$/.test(value)) {
                    callback(new Error())
                } else {
                    callback()
                }
            }
        }
        return {
            recordStatusList: { '00': '未查询到舱单',
                '01': '已上传',
                '02': '已提交,待船代审核',
                '03': '船代审核通过',
                '04': '船代驳回',
                '20': '已发送海关',
                '31': '海关备案成功',
                '32': '海关备案失败',
                '33': '海关人工审核',
                '8': '新单',
                '9': '已发送'
            },
            recordPassList: { '00': '未放行', '01': '已放行' },
            recordCodeList: [],
            showRecord: false,
            multipleSelection: [],
            dockStatusList,
            dockList: [],
            showSeach: false,
            time: [],
            total: 0,
            searchData: {
                billNo: '', // 提运单号
                cargoBatchNo: '', // 货物运输批次号
                consignmentStatus: '', // 状态
                consignorName: '', // 发货人名称
                containerNo: '', // 集装箱号
                declEndTime: '', // 申报时间：结束时间
                declStartTime: '', // 申报时间：开始时间
                dockCode: '', // 码头代码
                manifestType: '', // 舱单类型（原始舱单:MT1401; 预配舱单:MT2401）
                pageNum: 1, // 当前页数
                pageSize: 10, // 每页数据总数

                transportType: 1,
                vessel: '',
                voyageNo: ''
            },
            seaList: [],
            mtList: [],
            searchRule: {
                seaName: [
                    { required: false, message: 'Please fill in the user name', trigger: 'blur' }
                ],
                containerNo: [
                    { required: false, message: '请输入4个大写字母+7个数字', trigger: 'blur', validator: validatejzCheck }
                ],
                seaNum: [],
                seaPostMan: []
            },
            rfLoading: false
        }
    },
    mounted () {
        this.searchData.practicalTrainingId = this.$route.params.trainingId
        this.getList()
        this.getDockList()
    },
    methods: {
        getTime (time) {
            return formatTime.fullTime(time)
        },
        openRecord (data) {
            let id = data.consignmentVoList[0].consignmentId
            if (id) {
                var obj = { id: id, pageNum: 1, pageSize: 999 }
                recordSea(obj).then(res => {
                    console.log(res)
                    var su = res.data.success
                    if (su) {
                        this.showRecord = true
                        this.recordData = res.data.data.list
                    } else {
                        this.$Message.error('暂无数据')
                    }
                })
            } else {
                this.$Message.info('请先暂存')
            }
        },
        fs () {
            if (this.multipleSelection == 0) {
                this.$Message.error('请勾选发送内容')
            } else {
                let mids = this.multipleSelection.map((item) => { return item.manifestId })
                let ids = mids.join(',')
                var url = '/customs/manifest/send/shippingManifest?manifestId=' + ids + '&opType=20'
                sendSea(url).then(res => {
                    var su = res.data.success
                    if (su) {
                        this.$Message.success('批量发送成功')
                        console.log(res.data.data)
                    } else {
                        let arr = res.data.data
                        // console.log(arr);
                        var mes = ''
                        for (let [index, val] of Object.entries(arr)) {
                            console.log(index, val)
                            mes = mes + (index + ':' + val + '<br/>')
                        }
                        console.log(mes)
                        this.$Message.error({ content: mes, duration: 5 })
                    }
                })
            }
        },
        send () {
            if (this.multipleSelection.length == 0) {
                this.$Message.error('请勾选申报内容')
            } else {
                let mids = this.multipleSelection.map((item) => { return item.manifestId })
                let ids = mids.join(',')
                var url = '/customs/manifest/send/shippingManifest?manifestId=' + ids + '&opType=10'
                sendSea(url).then(res => {
                    var su = res.data.success
                    if (su) {
                        this.$Message.success('批量发送成功')
                    } else {
                        let arr = res.data.data
                        // console.log(arr);
                        var mes = ''
                        for (let [index, val] of Object.entries(arr)) {
                            mes = mes + (index + ':' + val + '<br/>')
                        }
                        this.$Message.error({ content: mes, duration: 5 })
                    }
                })
            }
        },
        getImportList () {
            this.$refs.seaListForm.resetFields()
            this.getList()
        },
        handleSelectionChange (val) {
            this.multipleSelection = val
            console.log(this.multipleSelection)
        },
        exportEx () {
            if (this.multipleSelection.length > 0) {
                var ids = this.multipleSelection.map(item => {
                    return item.manifestId
                })
                var idString = ids.join(',')
                window.open(downloadURL + '/customs/manifest/exportExcel?manifestIds=' + idString + '&Authorization=' + getToken())
            }
        },
        // 重新加载数据
        reGetJKData () {
            this.getList()
        },
        // 导入功能
        importGoodsListModel () {
            this.$refs.importModalRef.init('Sea')
        },
        getDockList () {
            var obj = {
                dataMainType: 'DOCK',
                pageNum: 1,
                pageSize: 99999
            }
            getBasicData(obj).then(res => {
                this.dockList = res.data.data.list
            }).catch(err => {
                // this.getDockList()
            })
        },
        handleDelete (id) {
            this.$Modal.confirm({
                title: '提示',
                content: '确认删除海运舱单？',
                loading: true,
                onOk: () => {
                    deleteSea(id).then(res => {
                        if (res.data.success) {
                            this.$Modal.remove()
                            this.$Message.success('删除成功')
                            this.getList()
                        } else {
                            this.$Message.error(res.data.msg)
                            this.$Modal.remove()
                        }
                    }).catch(err => {
                        this.$Modal.remove()
                    })
                }
            })
        },
        handlePrint (id) {
            console.log(id)
            this.$refs.printFileRef.init(id)
        },
        search () {
            this.$refs.seaListForm.validate((valid) => {
                this.searchData.pageNum = 1
                this.getList()
            })
        },
        // 页码改变回调
        currentChange (v) {
            this.searchData.pageNum = v
            this.getList()
        },
        // 每页条数改变回调
        pageSizeChange (v) {
            this.searchData.pageSize = v
            if (this.searchData.pageNum === 1) {
                this.getList()
            }
        },
        showSeachForm () {
            this.showSeach = !this.showSeach
        },
        getList () {
            if (this.time.length > 0) {
                if (this.time[1] != '') {
                    this.searchData.createEndTime = formatTime.fullTime(this.time[1])
                } else {
                    this.searchData.createEndTime = ''
                }
                if (this.time[0] != '') {
                    this.searchData.createStartTime = formatTime.fullTime(this.time[0])
                } else {
                    this.searchData.createStartTime = ''
                }
            } else {
                this.searchData.createEndTime = ''
                this.searchData.createStartTime = ''
            }
            return getList(this.searchData).then((res) => {
                if (res.data.success) {
                    const list = res.data.data.list
                    this.seaList = list
                    this.total = res.data.data.total
                }
            })
        },
        addSea () {
            this.nextPageReload()
            this.$router.push({
                name: 'smftAdd'
            })
        },
        getDetails (row) {
            this.nextPageReload()
            this.$router.push({
                name: 'smftEdit',
                params: {
                    id: row.manifestId
                },
                query: {
                    manifestNo: row.manifestNo
                }
            })
        },
        async refreshList () {
            if (this.rfLoading) return
            this.rfLoading = true
            try {
                await this.getList()
                this.rfLoading = false
            } catch (error) {
                this.rfLoading = false
            }
        }

    }
}
</script>
<style  scoped lang="less">
.ov{
  width:200px;
  line-height: 30px;
  }
    .sea-list{
        padding:20px;
        background: #fff;
        min-height:100%;
        .ivu-form-item{
          width:100%;
        }
    .search-label {
        text-align: right;
        font-size: 14px;
        padding: 2px 15px 2px 0;
        line-height: 28px;
    }
    .search-select-label {
        padding-left: 5px;
        padding-right: 15px;
    }
    .sea-top{
        padding-bottom: 10px;
        button{
            margin-right:10px;
        }
        position: relative;
        .search-tools {
            position: absolute;
            top: 10px;
            right: 0;
        }
    }
    .seatrans-enter, .seatrans-leave-to{
        opacity: 0;

    }
     .seatrans-enter-to, .seatrans-leave{
         transition: opacity 1s;

    }
    .content-footer{
        margin-top: 20px;
        text-align: right;
    }
}
.refresh-btn {
    cursor: pointer;
    margin-right: 15px;
    transition: all 1s ease 2s;
    &.loading {
       animation: circlerotate 1s 0s ease-in-out infinite;
    }
}

@keyframes circlerotate{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
</style>
